<template>
    <div class="data-info">
        <div ref="container"></div>
    </div>

</template>

<script>
    import Chart from "@/components/g2/chart";

    export default {
        mounted() {
            const data = [
                { year: '2016', value: 100 },
                { year: '2017', value: 150 },
                { year: '2018', value: 150 },
                { year: '2019', value: 180 },
                { year: '2020', value: 220 }
            ]
            // Step 1: 创建 Chart 对象
            const chart = new Chart({
                container: this.$refs['container'], // 指定图表容器 ID
                autoFit: true,
                height: 160,
                padding: [0, 20, 60, 50]
            });
            // Step 2: 载入数据源
            chart.data(data);
            chart.theme('antv');
            // Step 3: 创建图形语法，绘制柱状图
            chart.interval().position('year*value');
            chart.render();
        }
    }
</script>
